<template>
    <div class="tabber">
        <ul>
            <li v-for="(item,index) in routerList" :key="index" @click="switchTab(item.path)">
                <img src="@/assets/images/首页.jpeg" alt="">
                <span>{{item.title}}</span>
            </li>
        </ul>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                routerList:[
                    {
                        title:'首页',
                        path:'/shouye',
                        active:'@/assets/images/首页.jpeg',
                        selected:'@/assets/images/首页-select.jpeg'
                    },
                    {
                        title:'分类',
                        path:'/fenlei',
                        active:'@/assets/images/分类.jpeg',
                        selected:'@/assets/images/分类-select.jpeg'
                    },
                    {
                        title:'购物车',
                        path:'/car',
                        active:'@/assets/images/购物车.jpeg',
                        selected:'@/assets/images/购物车-select.jpeg'
                    },
                    {
                        title:'我的',
                        path:'/my',
                        active:'@/assets/images/我的.jpeg',
                        selected:'@/assets/images/我的-select.jpeg'
                    },
                ]
            }
        },
        methods:{
            switchTab(path){
                this.$router.replace(path)
            }
        }
    }
</script>

<style lang="scss" scoped>
    .tabber{
        position: fixed;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 60px;
        background-color: #F6F6F6;
        ul{
            display: flex;
            justify-content: space-around;
            margin: 7px  0;
            li{
                display: flex;
                flex-direction: column;
                img{
                    width: 30px;
                    height: 30px;
                }
                span{
                    font-size: 15px;
                }
            }
        }
    }
</style>